<template>
  <div class="je-admin-top-setting">
    <Popover
      trigger="click"
      placement="bottomRight"
      :visible="visible"
      @visible-change="handleHoverChange"
    >
      <template #content>
        <Settings @changeHeaderUrl="changeHeaderUrl" @changeProver="changeProver"></Settings>
      </template>

      <div class="user-icon">
        <img v-if="photoUrl" :src="photoUrl" class="user-img-url" />
        <span v-else class="usename">{{ username }}</span>
      </div>
    </Popover>
  </div>
</template>
<script>
  import { defineComponent, computed, ref } from 'vue';
  import { Popover } from 'ant-design-vue';
  import Settings from './settings.vue';
  import { getFileUrlByKey, decode, getCurrentUser } from '@jecloud/utils';
  export default defineComponent({
    name: 'AdminTopMenuActions',
    components: {
      Settings,
      Popover,
    },
    setup() {
      const currentUser = ref(getCurrentUser());
      const { name } = currentUser.value;
      const username = name && name.slice(-2);
      const refreshUrl = ref(false);
      const visible = ref(false);
      const photoUrl = computed(() => {
        refreshUrl.value;
        const { avatar } = currentUser.value;
        return (avatar && getFileUrlByKey(decode(avatar)[0]?.fileKey)) || '';
      });
      const changeHeaderUrl = (data) => {
        refreshUrl.value = !refreshUrl.value;
        photoUrl.value = getFileUrlByKey(decode(data).fileKey);
        currentUser.value.avatar = data;
      };
      const changeProver = () => {
        visible.value = false;
      };
      const handleHoverChange = () => {
        visible.value = !visible.value;
      };
      return {
        photoUrl,
        changeHeaderUrl,
        username,
        refreshUrl,
        currentUser,
        changeProver,
        visible,
        handleHoverChange,
      };
    },
  });
</script>
<style lang="less" scoped>
  .je-admin-top-setting {
    margin-right: 20px;
    .user-icon {
      width: 38px;
      height: 38px;
      text-align: center;
      border-radius: 100%;
      .user-img-url {
        width: 38px;
        height: 38px;
        border-radius: 100%;
      }
      .usename {
        display: inline-block;
        width: 100%;
        color: #fff;
        height: 100%;
        border-radius: 100%;
        line-height: 38px;
        background: #faa03a;
        text-align: center;
      }
    }
  }
</style>
